<template>
	<view class="container">
		<!-- 全部订单 -->
		<view class="optios">
			<view class="optios-tabs">
				<u-tabs class="custom-tabs" lineColor="#C19C55" lineHeight="6" lineWidth="44" :active="activeTab"
					:scrollable="false" :list="list1" @change="changeTab">
				</u-tabs>
			</view>
			<view class="">
				<view v-if="activeTab ==0">
					<view class="section">
						<view class="section-header">
							<text class="section-title">理疗项目</text>
							<text class="section-status">待消费</text>
						</view>
						<view class="item-card">
							<image class="item-image" src="../../static/logo.png"></image>
							<view class="item-info">
								<view class="item-title">
									<view class="item-title-text">
										按摩 脊柱侧弯 正骨调理
									</view>
									<view class="item-title-money">
										<text class="_text">￥</text><text class="__text">598</text>
									</view>
								</view>
								<view class="item-details">预约时间：2024-05-22 13:30</view>
								<view class="item-details">服务时长：60分钟</view>
								<view class="item-operations">
									<view class="item-operations-left">取消订单</view>
									<view class="item-operations-right">查看订单</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 医师专家部分 -->
					<view class="section">
						<view class="section-header">
							<text class="section-title">医师专家</text>
							<text class="section-status">已完成</text>
						</view>
						<view class="item-card">
							<image class="item-image" src="../../static/logo.png"></image>
							<view class="item-info">
								<view class="item-info-top">
									<view class="_item-title">
										<view class="_item-title_left">
											孙老师
										</view>
										<view class="_item-title_right">
											主任医师
										</view>
									</view>
									<view class="item-title-money">
										<text class="_text">￥</text><text class="__text">598</text>
									</view>
								</view>
								<view class="item-details">服务时长：60分钟</view>
								<view class="item-details">服务内容：按摩、正骨、腰椎间盘突出</view>
								<view class="item-operations">
									<view class="item-operations-left">查看订单</view>
									<view class="item-operations-right">去评价</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 卡券购买 -->
					<view class="section">
						<view class="section-header">
							<text class="section-title">卡券购买</text>
							<text class="section-status">待付款</text>
						</view>
						<view class="item-card">
							<image class="item-image" src="../../static/logo.png"></image>
							<view class="item-info">
								<view class="item-title">
									<view class="item-title-text">
										家庭卡会员
									</view>
									<view class="item-title-money">
										<text class="_text">￥</text><text class="__text">10000</text>
									</view>
								</view>
								<view class="item-details">姓名：豪娜丽莎</view>
								<view class="item-details">储值卡号：9837 8765 1123</view>
								<view class="item-operations">
									<view class="item-operations-left">取消订单</view>
									<view class="item-operations-right">取消订单</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="activeTab ==1">
					2
				</view>
				<view v-if="activeTab ==2">
					3
				</view>
				<view v-if="activeTab ==3">
					4
				</view>
				<view v-if="activeTab ==4">
					5
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				list1: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待消费',
				}, {
					name: '待评价',
				}, {
					name: '已完成',
				}],
			};
		},
		methods: {
			changeTab(index) {
				this.activeTab = index.index;
				console.log(111);
			},
		},
	};
</script>

<style lang="less" scoped>
	/deep/ .u-tabs__wrapper__nav__line {
		width: 30px !important;
		margin-left: 13rpx !important;

	}
	.optios-tabs{
		margin-bottom: 46rpx;
	}
	.section {
		margin-left: 26rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		width: 700rpx;
		height: 292rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(134, 124, 118, 0.04);
		border-radius: 20rpx;
		border: 1rpx solid #F2EEEE;
		position: relative;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		width: 700rpx;
		height: 66rpx;
		background: linear-gradient(137deg, #FCFAF6 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(134, 124, 118, 0.04);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		line-height: 66rpx;
		padding: 0 28rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #C19C55;
	}

	.section-status {
		font-size: 28rpx;
		color: #C19C55;
	}

	.item-card {
		display: flex;
	}

	.item-image {
		width: 172rpx;
		height: 171rpx;
		border-radius: 10rpx;
		margin-left: 24rpx;
	}

	.item-info {
		flex: 1;
		margin-left: 20rpx;
		.item-info-top {
			display: flex;
			justify-content: space-between;
			.item-title-money {
				margin-top: -10rpx;
				margin-right: 26rpx;

				._text {
					font-size: 24rpx;
					color: #202022;
				}

				.__text {
					font-size: 40rpx;
					color: #202022;
				}
			}
		}
	}

	.item-title {
		display: flex;
		justify-content: space-between;

		.item-title-text {
			width: 294rpx;
			height: 28rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 28rpx;
			color: #202022;
			line-height: 42rpx;
			text-shadow: 0px 4px 8px rgba(134, 124, 118, 0.04);
			text-align: left;
			font-style: normal;
		}

		.item-title-money {
			margin-top: -10rpx;
			margin-right: 26rpx;

			._text {
				font-size: 24rpx;
				color: #202022;
			}

			.__text {
				font-size: 40rpx;
				color: #202022;
			}
		}
	}

	._item-title {
		display: flex;

		._item-title_left {
			width: 84rpx;
			height: 28rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 28rpx;
			color: #202022;
			line-height: 42rpx;
			text-shadow: 0px 4px 8px rgba(134, 124, 118, 0.04);
			text-align: left;
			font-style: normal;
		}

		._item-title_right {
			width: 98rpx;
			height: 28rpx;
			background: #F6F0E6;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-weight: 500;
			font-size: 18rpx;
			color: #C9A96A;
			padding-left: 16rpx;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}

	.doctor-tag {
		margin-left: 10rpx;
		padding: 0 10rpx;
		background-color: #C19C55;
		color: #fff;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.item-details {
		height: 22rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 22rpx;
		color: #989AA2;
		line-height: 34rpx;
		text-shadow: 0px 4px 8px rgba(134, 124, 118, 0.04);
		text-align: left;
		font-style: normal;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
	}

	.item-operations {
		display: flex;
		position: absolute;
		bottom: 22rpx;
		right: 26rpx;

		.item-operations-left {
			width: 136rpx;
			height: 48rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(134, 124, 118, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #C9C9C9;
			font-weight: 400;
			font-size: 26rpx;
			color: #B3B3B3;
			text-align: center;
			line-height: 48rpx;
		}

		.item-operations-right {
			width: 136rpx;
			height: 48rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(134, 124, 118, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #C19C55;
			font-weight: 400;
			font-size: 26rpx;
			color: #C19C55;
			text-align: center;
			line-height: 48rpx;
			margin-left: 10rpx;
		}
	}
</style>